<template>
  <div>
    <MyCard v-model="list">
      <template #title="{ bt }">
        <div class="head">{{ bt }}</div>
      </template>

      <template #res="{ item }">
        <span class="zuo">{{ item.content }}</span>
        <span class="you">{{ item.num }}</span>
      </template>
    </MyCard>

    <MyCard v-model="add">
      <template #title>
        <div class="head">我是标题</div>
      </template>

      <template #res="{ item }">
        <span class="zuo">{{ item.content }}</span>
        <span class="you">{{ item.num }}</span>
      </template>
    </MyCard>
  </div>
</template>

<script>
import MyCard from './components/my-card.vue'
export default {
  components: {
    MyCard,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          content: '我的赞',
          num: '1287',
        },
        {
          id: 2,
          content: '我的收藏',
          num: '654',
        },
        {
          id: 3,
          content: '我的哥',
          num: '123',
        },
        {
          id: 4,
          content: '我的儿周乐天',
          num: '555',
        },
        {
          id: 5,
          content: '我的孙儿周乐天',
          num: '555',
        },
        {
          id: 6,
          content: '吸血鬼周乐天',
          num: '555',
        },
      ],
      add: [
        {
          id: 9,
          content: '天天向上',
          num: '999',
        },
        {
          id: 8,
          content: '好好学习',
          num: '999',
        },
        {
          id: 7,
          content: '我爱我家',
          num: '999',
        },
      ]
    }
  },
}
</script>
